<template>
  <div class="app-container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <div class="system-title">XX管理系统</div>
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        router
      >
        <el-menu-item index="/home">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        
        <el-sub-menu index="management">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>管理页</span>
          </template>
          <el-menu-item index="/user-management">用户管理</el-menu-item>
          <el-menu-item index="/system-management">系统管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/logs">
          <el-icon><Document /></el-icon>
          <span>日志</span>
        </el-menu-item>

        <el-menu-item index="/profile">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HomeFilled, Setting, Document, User } from '@element-plus/icons-vue'

const activeMenu = ref('/home')
const isCollapse = ref(false)
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.sidebar {
  width: 16.666%;
  background-color: #545c64;
  color: white;
  height: 100%;
}

.system-title {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background-color: #000;
  color: white;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
}

.el-menu-vertical {
  border-right: none;
}
</style>